<template>
  <div class="banner">
    <Breadcrumb name1="轮播图管理" name2="轮播图"></Breadcrumb>
    <h2 class="logo">商品网站的轮播图效果</h2>
    <div class="imgs">
      <div class="bigimgs">
        <el-carousel trigger="click" height="263px">
          <el-carousel-item v-for="item in bigimgs" :key="item">
            <img :src="item" alt="" />
          </el-carousel-item>
        </el-carousel>
        <h4>PC端首页轮播图</h4>
      </div>
      <div class="smlimgs">
        <el-carousel trigger="click" height="263px">
          <el-carousel-item v-for="item in smallimgs" :key="item">
            <img :src="item" alt="" />
          </el-carousel-item>
        </el-carousel>
        <h4>iPhone端首页轮播图</h4>
      </div>
    </div>
    <div class="content">
      <div class="left">
        <el-popover placement="bottom" width="400" trigger="click">
          <el-table :data="result">
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column
              width="850"
              property="bigimg"
              label="图片Url"
            ></el-table-column>
            <el-table-column label="操作" width="80px">
              <template v-slot="scope">
                <!-- 删除按钮 -->
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  @click="deleteImgUrl(scope.row.id)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button slot="reference">点击查看图片详情</el-button>
        </el-popover>
      </div>
      <div class="right">
        <el-popover placement="bottom" width="400" trigger="click">
          <el-table :data="result">
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column
              width="850"
              property="smlimg"
              label="图片Url"
            ></el-table-column>
            <el-table-column label="操作" width="80px">
              <template v-slot="scope">
                <!-- 删除按钮 -->
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  @click="deleteImgUrl(scope.row.id)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button slot="reference">点击查看图片详情</el-button>
        </el-popover>
      </div>
    </div>
    <div class="insert">
      <el-input
        placeholder="添加PC端轮播图"
        @blur="checkUrl"
        v-model="bigimg"
        clearable
      >
      </el-input>
      <el-input
        placeholder="添加iPhone端轮播图"
        @blur="checkUrl"
        v-model="smlimg"
        clearable
      >
      </el-input>
      <el-button type="primary" @click="previewImg">预览图片效果</el-button>
      <el-button type="info" @click="addImgUrl">添加图片</el-button>
    </div>
  </div>
</template>
<script>
import { getbanner, deleteBanner, addBanner } from '@/api'
import Breadcrumb from '@/components/breadcrumb'
import { Message } from 'element-ui'
export default {
  data() {
    return {
      bigimgs: [],
      smallimgs: [],
      result: [],
      bigimg: '',
      smlimg: '',
      isAdd: true,
    }
  },
  components: {
    Breadcrumb,
  },
  created() {
    this.getbanner()
  },
  methods: {
    async getbanner() {
      const { data: res } = await getbanner()
      this.result = res.data
      this.bigimgs = res.data.map((item) => item.bigimg)
      this.smallimgs = res.data.map((item) => item.smlimg)
    },
    async deleteImgUrl(id) {
      this.$confirm('此操作将会连同旁边ID的图片一起删除,确定吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        const { data: res } = await deleteBanner({ id })
        if (res.code == 1) {
          Message({
            message: res.msg,
            type: 'success',
          })
          this.getbanner()
        } else {
          Message({
            message: res.msg,
            type: 'error',
          })
        }
      })
    },
    checkUrl() {
      let reg =
        /^(https?|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]$/
      if (!reg.test(this.bigimg)) {
        Message({
          message: '请输入正确的图片地址',
          type: 'error',
        })
        this.bigimg = ''
        this.isAdd = false
      } else if (!reg.test(this.smlimg)) {
        Message({
          message: '请输入正确的图片地址',
          type: 'error',
        })
        this.smlimg = ''
        this.isAdd = false
      }
    },
    addImgUrl() {
      if (!this.bigimg || !this.smlimg || this.isAdd) {
        Message({
          message: '请输入正确的图片地址',
          type: 'error',
        })
        return
      }
      this.$confirm('添加需要两张预览全部有效,确定吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        const { data: res } = await addBanner({
          bigimg: this.bigimg,
          smlimg: this.smlimg,
        })
        if (res.code == 1) {
          Message({
            message: res.msg,
            type: 'success',
          })
          this.getbanner()
        } else {
          Message({
            message: res.msg,
            type: 'error',
          })
        }
      })
    },
    previewImg() {
      if (!this.bigimg || !this.smlimg || this.isAdd) {
        Message({
          message: '请输入正确的图片地址',
          type: 'error',
        })
        return
      }
      this.bigimgs.unshift(this.bigimg)
      this.smallimgs.unshift(this.smlimg)
    },
  },
}
</script>
<style lang="scss" scoped>
.banner {
  min-width: 1200px;
  .logo {
    font-size: 30px;
    font-weight: bold;
    color: #409eff;
    margin: 30px 0;
    text-align: center;
  }
  .imgs {
    margin-top: 75px;
    display: flex;
    justify-content: space-around;
    .bigimgs {
      width: 800px;
    }
    .smlimgs {
      width: 400px;
    }
    img {
      width: 100%;
      height: 100%;
    }
    h4 {
      font-size: 20px;
      font-weight: bold;
      color: #409eff;
      margin-top: 30px;
      text-align: center;
    }
  }
  ::v-deep .el-carousel__button {
    background-color: #000;
  }
  .content {
    margin-top: 45px;
    display: flex;
    justify-content: space-around;
    text-align: center;
    .el-dropdown {
      font-size: 16px;
      color: #303133;
    }
    .left {
      width: 800px;
    }
    .right {
      width: 400px;
    }
  }
  .insert {
    margin: 55px auto;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    .el-input {
      width: 300px;
      margin-right: 10px;
    }
  }
}
</style>
